<template>
  <div class="radioBox">
    <label class="my-radio" v-for="(item, index) in options" :key="index">
      <input
        type="radio"
        :name="name"
        :checked='item.isChecked'
        :value="item.value"
        @change="updataInp"
      />
      <span class="radio-content">{{ item.value }}</span>
    </label>
  </div>
</template>

<script>
export default {
  name: "my-radio", // 组件名
  model: {
    // 自定义 v-model的 prop和event
    prop: "options", // 属性
    event: "updataInp", // 事件
  },
  props: {
    options: {
      // radio的value属性，每一项的名称
      type: Array, // 数据类型
      required: true, // 是否为必填的字符串
      // default: 100默认值（仅示意）
    },
    name: {
      type: [Number, String],
      required: true,
    },
  },

  methods: {
    // clearChecked (ev){
    //  console.log(ev.target.checked)
    //  this.$emit("change", ev.target.checked);
    // },
    updataInp(ev) {
      console.log(ev.target.value);
      console.log(ev.target.checked)
      this.$emit("change", ev.target.value);
    },
  },
};
</script>

<style lang="less" scoped>
.my-radio {
  margin-right: 20px;
}
.radio-icon:checked  +.radio-content {
  background-color: #fff;
  border-radius: 11px;
  color: royalblue;
}
</style>
